<template>
    <div class="login">
        <div class="loginBox">
            <div class="avatarBox">
                <img src="../assets/002.png" />
            </div>
            <el-form label-width="70px" class="loginForm"
             ref="loginFormref" :model="formdata" :rules="MyRules">
                <el-form-item label="用户名" prop="username">
                    <el-input prefix-icon="el-icon-user-solid"
                     v-model="formdata.username"
                     placeholder="请输入您的用户名"></el-input>
                </el-form-item>
                <el-form-item label="密 码" prop="password">
                    <el-input prefix-icon="el-icon-view"
                    v-model="formdata.password"
                    type="password"
                    placeholder="请输入您的密码"></el-input>
                </el-form-item>
                <el-form-item class="buttons">
                    <el-button type="primary" @click="login()">登录</el-button>
                    <el-button type="info" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            formdata:{  //表单对象
                username:"",
                password:""
            },
            MyRules:{  //我的规则
                username:[
                    //required  必填
                    //message  信息提示
                    //trigger  触发条件
                    {required:true, message:"请输入用户名",trigger:"blur"},  //子规则1
                    {min:3,max:10,message:"长度在3到10个字符之间",trigger:"blur"}   //子规则2
                ],   //用户名规则
                password:[ //密码规则
                    {required:true, message:"请输入密码",trigger:"blur"}
                ]   
            }
        }
    },
    methods:{
        resetForm(){  //重置
            this.$refs.loginFormref.resetFields();   //找到表单,一键重置
        },
        login(){  //登录方法
            //1、校验
            this.$refs.loginFormref.validate( async valid =>{
                //valid校验结果，会跑一遍你的规则们
                if(!valid)   return;   //直接结束
                //给假后台发请求   带着用户名和密码，如果正确就跳转，错误就不动
                const res = await this.$http.get("/api/login",{params:this.formdata})
                if(res.data.code!=0){  //code不为0
                    return this.$message.error('登录失败！'); //饿了么弹窗体系   小红弹窗
                }
                this.$message.success("登录成功");   //小绿弹窗
                //存储令牌
                window.sessionStorage.setItem("tocken",res.data.tocken)
                //跳转   编程式导航
                this.$router.push("/home")
                console.log(res.data)
            })  

        }
    }
};
</script>



<style scoped>
.login {
    background-color: darkslategray;
    height: 100%;
}

.loginBox {
    width: 450px;
    height: 320px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

.avatarBox {
    height: 60px;
    width: 60px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 0 10px #dddddd;
    position: absolute;
    transform: translate(-15%, -15%);
    background-color: #ffffff;
}

.avatarBox img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: #eee;
}

.buttons {
    display: flex;
    justify-content: end;
}

.loginForm {
    position: absolute;
    bottom: 30px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
